[Day1] React Native是什麼？

12th鐵人賽 react-native

b97201019

2020-09-01 11:55:55

47358 瀏覽

分享至

自我介紹一下

首先來介紹一下參賽動機，小弟公務員做了三四年後覺得工作沒什麼樂趣，自己又突然想來學一下App，於是辭職後開始尋找相關資訊，開頭遇上了不少狀況

要報名App補習班時被補習班人員打槍（說是太難我學不來？！）
轉頭看網路課程學Vue
開始找工作後被騙到日本黑心公司去浪費了一年（發現公司不對勁趁假日或晚上偷學React）

逃回台灣後最近才在某傳產開始第一份前端工作，現在公司的網頁是以Vue為開發工具，雖然剛開始就是學Vue所以也不是說無法應付，但後來開始碰React的我發現比較喜歡React的寫法，所以之後私底下自己寫東西是以React為開發工具，最近開始在React中加入TypeScript的我突然遇上了鐵人賽即將開賽的訊息，想到以前有稍微看過，React Native本身的寫法與React差異不大，就有了趁這個期間開始學習撰寫App的念頭，於是便有了這個系列。

React Native跟React的關係是？

React Native是Facebook開發的框架，主要是讓網頁開發人員用接近寫React的方式以JavaScript撰寫App，React Native再將寫下的JS轉換為原生的程式碼，對於網頁開發人員的好處當然是能以自己習慣的方式撰寫App，而且還能一次撰寫雙平台的App，大量地減少了摸索的時間。

這裡直接來看看官網首頁的範例

import React from 'react';
import {Text, View} from 'react-native';
import {Header} from './Header';
import {heading} from './Typography';

const WelcomeScreen = () =>
  <View>
    <Header title="Welcome to React Native"/>
    <Text style={heading}>Step One</Text>
    <Text>
      Edit App.js to change this screen and turn it
      into your app.
    </Text>
    <Text style={heading}>See Your Changes</Text>
    <Text>
      Press Cmd + R inside the simulator to reload
      your app’s code.
    </Text>
    <Text style={heading}>Debug</Text>
    <Text>
      Press Cmd + M or Shake your device to open the
      React Native Debug Menu.
    </Text>
    <Text style={heading}>Learn</Text>
    <Text>
      Read the docs to discover what to do next:
    </Text>
   </View>

看起來真的只是用了其他元件的React

不過React Native扮演的其實算是渡河時河中的踏腳石，有了踏腳石當然會相對容易渡河（從Web踏入原生App），然而React Native並不能解決所有的需求，所以一些特定的需求還是需要原生來處理，也就是說......多少還是會碰到一些Java或是Objective-C。